<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/v1/base.ref.jsp" %>
    <%@include file="/WEB-INF/views/layout/miiteen/v1/page.edit.ref.jsp" %>
</head>
<body>
<div class="mainpage edit">

    <!--顶部操作工具栏-->
    <mt-toolbar>
        <shiro:hasPermission name="singleInfo:edit">
            <mt-button label="保存" type="primary" icon="el-icon-check" @click="save"></mt-button>
        </shiro:hasPermission>
        <mt-button label="返回" icon="el-icon-back" @click="back"></mt-button>
    </mt-toolbar>

    <!--编辑表单-->
    <mt-edit-content>
        <mt-form :ref="formid" :col="3" :model="form" :rules="rules" :label-width="labelwidth">
            <!--视业务进行更改-begin-->
            <mt-form-item label="单个图片" prop="picture">
                <el-upload
                        class="upload-demo"
                        action="/uploadfile/upload"
                        list-type="picture-card"
                        :before-upload="beforeSingleUploadPicture"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleSingleRemove"
                        :on-success="handleSingleSuccess"
                        :on-exceed="handleSingleExceed"
                        :limit="1">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </mt-form-item>
            <mt-form-item label="多个图片" prop="picture">
                <el-upload
                        class="upload-demo"
                        list-type="picture"
                        :multiple=true
                        action="/uploadfile/file"
                        :before-upload="beforeUploadPicture"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove"
                        :file-list="form.pictureList">
                    <el-button size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
            </mt-form-item>
            <mt-form-item label="文件" prop="file">
                <el-upload
                        class="upload-demo"
                        action="/uploadfile/file"
                        :multiple=true
                        :before-upload="beforeUploadFile"
                        :on-success="handleFileSuccess"
                        :on-remove="handleFileRemove">
                    <el-button size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
            </mt-form-item>
            <!--视业务进行更改-end-->
        </mt-form>
    </mt-edit-content>
</div>
<script>
    //初始化数据，必须放置在列表页面封装部分前
    function initVueOption(obj) {
        //设置控制器
        obj.data.controller = "${ctx}/customsportal/upload";
        //设置表单数据
        obj.data.form = {
            checkFile:"",
            checkFileName:"",
        };

        /*===================================单个图片上传-begin=========================================*/
        obj.data.dialogImageUrl = '';
        obj.data.dialogVisible = false;
        //上传前验证
        obj.methods.beforeSingleUploadPicture=function(file){
            var type =file.type;
            var size=file.size / 1024 / 1024 ;
            if (type != 'image/jpeg'&& size<2) {
                window.parent.mtMsg.error("提示:上传图片只能是 JPG/PNG/GIF/JPEG格式的文件,大小不能超过 2MB!");
                return false;
            }
        }

        obj.methods.handleSingleRemove = function (file, fileList) {
            //删除
            obj.data.form.checkFile = "";
            obj.data.form.checkFileName = "";
        }

        obj.methods.handlePictureCardPreview = function (file) {
            //放大
            obj.data.dialogImageUrl = file.url;
            obj.data.dialogVisible = true;
        }

        obj.methods.handleSingleSuccess = function (file) {
            //成功
            obj.data.form.checkFile = file.data;
            obj.data.form.checkFileName = file.message;
        }
        obj.methods.handleSingleExceed = function () {
            //个数
            window.parent.mtMsg.error("提示:只允许上传 1 个图片");
        }
        /*===================================单个图片上传-end=========================================*/

        /*===================================多个图片上传-begin=========================================*/
        obj.data.pictureList = [];
        //上传前验证
        obj.methods.beforeUploadPicture=function(file){
            var type =file.type;
            var size=file.size / 1024 / 1024 ;
            if (type != 'image/jpeg'&& size<2) {
                window.parent.mtMsg.error("提示:上传图片只能是 JPG/PNG/GIF/JPEG格式的文件,大小不能超过 2MB!");
                return false;
            }
        }

        var fileindex = 0;
        obj.methods.handleSuccess = function (file) {
            file.id = --fileindex;
            var file = {id: file.id, name: file.name, path: file.data};
            obj.data.pictureList.push(file);
        }
        obj.methods.handleRemove = function (file) {
            for (var i = 0; i < obj.data.pictureList.length; i++) {
                if (file.id == obj.data.pictureList[i].id) {
                    obj.data.pictureList.splice(i, 1);
                }
            }
        }
        /*===================================多个图片上传-end=========================================*/


        /*===================================文件上传-begin=========================================*/
        obj.data.fileList = [];
        //上传文件
        obj.methods.beforeUploadFile = function (file) {

            var extension = file.name.substring(file.name.lastIndexOf('.') + 1);
            var size=file.size / 1024 / 1024 ;
            if (extension != 'doc' && extension != 'docx' && extension != 'pdf' && extension != 'xlsx'&& extension != 'war'&& extension != 'zip'&& extension != 'pptx'&& extension != 'txt') {
                window.parent.mtMsg.error("提示:只能上传后缀是.doc、.docx、.pdf、.xlsx、.war、.zip、.ppt的文件");
                return false;
            }
            if (size>10) {
                window.parent.mtMsg.error("提示:上传文件大小不能超过 10MB!");
                return false;
            }
        }
        obj.methods.handleFileSuccess = function (file) {
            //成功
            file.id = --fileindex;
            var file = {id: file.id, name: file.name, path: file.data};
            obj.data.fileList.push(file);
        }
        obj.methods.handleFileRemove = function (file) {
            //删除
            for (var i = 0; i < obj.data.fileList.length; i++) {
                if (file.id == obj.data.fileList[i].id) {
                    obj.data.fileList.splice(i, 1);
                }

            }
        }
        /*===================================文件上传-end=========================================*/
    }
</script>
</body>
</html>
